<template>
	<view class="shangpinshangjia">
		<view class="top">
			<image src='../../static/businessImg/back.png' class="topback" @click="back">
			</image>
			<view class="topname">
				产品上架
			</view>
		</view>

		<view class="tiezishangchuancenter">
			<view class="tiezishangchuancenterform">
				<u-form :model="form" ref="uForm" label-position="left" label-width="150">
					<u-form-item label="产品名称" prop="name">
						<u-input v-model="form.name" placeholder="请填写产品名称" />
					</u-form-item>

					<u-form-item label="产品库存" prop="kucun">
						<u-input v-model="form.kucun" placeholder="请填写产品库存" />
					</u-form-item>

					<u-form-item label="产品价格" prop="price">
						<u-input v-model="form.price" placeholder="请填写产品价格" />
					</u-form-item>

					<u-form-item label="产品规格" prop="sku">
						<u-icon name="plus-circle" @click="handleAddSku"></u-icon>

					</u-form-item>


					<view style="width: 100%; padding: 30rpx 0;" v-if="skulist.length != 0">
						规格
						<u-tag :text="item.name" mode="light" type="primary" v-for="(item, index) in skulist"
							:key="index" style="margin-left: 10rpx; margin-bottom: 10rpx;"
							@click="handleTagClick(item, index)" />
					</view>
					<u-form-item label="产品参数" prop="params">
						<u-input v-model="form.params" placeholder="请填写产品参数" />
					</u-form-item>

					<u-form-item label="产品分类" prop="fenlei">
						<u-input v-model="form.fenlei" type="select" @click="shows = true" placeholder="请选择产品分类" />
					</u-form-item>


					<u-form-item label="平台分类" prop="sysType">
						<u-input v-model="form.sysType" type="select" @click="show2 = true" placeholder="请选择产品平台分类" />
					</u-form-item>


					<u-form-item label="是否供应" v-if="isAdd">
						<u-radio-group v-model="form.isCost">
							<u-radio v-for="(item, index) in radioList" :key="index" :name="item.id">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>


					<view class="uploadtitle" style="padding-top: 37rpx; display: flex;align-items: center;">
						产品主图<span style="color: #FF0000;">*</span><span
							style="font-size: 20rpx;color: #5A5A5A;">（产品封面图）</span>
					</view>


					<view class="uploadingview">
						<view class="detailImages" v-if="image != ''">
							<image :src="image"></image>
							<view class="deldiv1" @click="delimage()">

							</view>
						</view>
						<view class="imageimg" @click="chooseimage" v-if="image == ''">
							<image src="../../static/businessImg/add.png" mode="" style="width: 218rpx;height: 218rpx;">
							</image>
						</view>
					</view>


					<view class="uploadtitle" style="padding-top: 37rpx; display: flex;align-items: center;">
						产品轮播图<span style="color: #FF0000;">*</span><span
							style="font-size: 20rpx;color: #5A5A5A;">（主图尺寸800*800px）</span>
					</view>

					<view class="uploadingview">
						<view class="imageimg" v-for="(item , index) in images" :key="index">
							<image :src="item" style="width: 218rpx;height: 218rpx;"></image>
							<view class="deldiv" @click="delimages(index)">

							</view>
						</view>
						<view class="imageimg" @click="choosepic" v-if="images.length < 9">
							<image src="../../static/businessImg/add.png" mode="" style="width: 218rpx;height: 218rpx;">
							</image>
						</view>
					</view>


					<view class="uploadtitle" style="padding-top: 37rpx; display: flex;align-items: center;">
						产品详情<span style="color: #FF0000;">*</span><span
							style="font-size: 20rpx;color: #5A5A5A;">（详情宽度750px）</span>
					</view>


					<view class="uploadingview">
						<view class="detailImages" v-if="detailImages != ''">
							<img :src="detailImages" style="width: 100%;"></img>
							<view class="deldiv1" @click="deldetailImages()">

							</view>
						</view>
						<view class="imageimg" @click="choosedetaipic" v-if="detailImages == ''">
							<image src="../../static/businessImg/add.png" mode="" style="width: 218rpx;height: 218rpx;">
							</image>
						</view>
					</view>
				</u-form>

				<view class="shangjiabtn" @click="handleBtnClick">
					{{isAdd ? '上架' : '修改'}}
				</view>
			</view>
		</view>

		<u-action-sheet :list="actionSheetList" v-model="shows" @click="actionSheetCallback">
		</u-action-sheet>


		<u-action-sheet :list="actionSheetLists" v-model="show2" @click="actionSheetCallback1">
		</u-action-sheet>


		<u-popup v-model="show" mode="center" :mask-close-able="false" width="90%">
			<view class="skupopup">
				<view class="skupopuptitle">
					{{skuadd ? '添加产品规格' : '修改产品规格'}}
				</view>
				<u-form :model="skuForm" ref="skuForm" label-position="left" label-width="150"
					style="margin-top: 30rpx;">
					<u-form-item label="规格名称" prop="name">
						<u-input v-model="skuForm.name" placeholder="请填写规格名称" />
					</u-form-item>
					<u-form-item label="规格价格" prop="price">
						<u-input v-model="skuForm.price" placeholder="请填写规格价格" />
					</u-form-item>

					<u-form-item label="返佣金额" prop="price">
						<u-input v-model="skuForm.commission" placeholder="请填写规格价格" />
					</u-form-item>


				</u-form>

				<view class="uploadtitle" style="padding-top: 37rpx; display: flex;align-items: center;">
					规格图片
				</view>


				<view class="uploadingview">
					<view class="imageimg" v-if="skuImages != ''">
						<image :src="skuImages" style="width: 218rpx;height: 218rpx;"></image>
						<view class="deldiv" @click="delskuImages()">

						</view>
					</view>
					<view class="imageimg" @click="chooseskupic" v-if="skuImages == ''">
						<image src="../../static/businessImg/add.png" mode="" style="width: 218rpx;height: 218rpx;">
						</image>
					</view>
				</view>

				<view class="skupopupbtn">
					<view class="skupopupadd" @click="handleAddSkuTolist">
						{{skuadd ? '添加' : '修改'}}
					</view>
					<view class="skupopupadd" @click="handleDeleteList" v-if="!skuadd">
						删除
					</view>
					<view class="skupopupadd" @click="show = false">
						取消
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	proTypeList,
	sysType
} from "@/api/storeAdmin.js";
import {
	addPro,
	updPro,
	proDetails
} from "@/api/gongyingshang.js";

import storage from "../../utils/storage";
export default {
	data() {
		return {
			id: "",
			isAdd: true,
			data: {},
			form: {
				name: "",
				kucun: "",
				price: "",

				params: "",
				fenlei: "",
				sysType: "",
				isCost: 0,
			},

			radioList: [{
				id: 0,
				name: "不供应",
			},
			{
				id: 1,
				name: "供应",
			},
			],
			skuForm: {
				name: "",
				price: "",
				commission: "",
			},
			currenSkuIndex: "",
			skuadd: false,
			actionSheetList: [],
			actionSheetLists: [],
			shows: false,
			show2: false,
			currentSelect: {},
			currentSelects: {},
			images: [],
			skuImages: "",
			detailImages: "",
			image: "",
			skulist: [],
			show: false,
			rules: {
				name: [{
					required: true,
					message: "请填写产品名称",

					trigger: ["change", "blur"],
				},],
				kucun: [{
					required: true,
					message: "请填写产品库存",

					trigger: ["change", "blur"],
				},],

				price: [{
					required: true,
					message: "请填写产品价格",

					trigger: ["change", "blur"],
				},],

				params: [{
					required: true,
					message: "请填写产品参数",

					trigger: ["change", "blur"],
				},],

				fenlei: [{
					required: true,
					message: "请选择产品分类",

					trigger: ["change", "blur"],
				},],

				sysType: [{
					required: true,
					message: "请选择产品平台分类",

					trigger: ["change", "blur"],
				},],
			},
		};
	},

	onReady() {
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id;
			this.isAdd = false;
		}

		proTypeList({
			id: storage.getUserInfo().storeId,
		}).then((res) => {
			let that = this;
			let obj = [];
			if (res.data != null && res.data != "" && res.data != "[]") {
				res.data.forEach((item) => {
					obj.push({
						...item,
						text: item.name,
					});
				});
			}
			this.actionSheetList = obj;

			sysType({ id: storage.getUserInfo().storeId, }).then(ress => {
				let obj1 = [];

				if (ress.data != null && ress.data != "" && ress.data != "[]") {
					ress.data.forEach((item) => {
						obj1.push({
							...item,
							text: item.name,
						});
					});
				}

				this.actionSheetLists = obj1;

				if (that.id != "") {

					that.getDetail();
				}


			})

		});
	},

	onShow() { },
	methods: {
		back() {

			uni.navigateBack()
			// if (this.id != "") {
			//   uni.navigateTo({
			//     url: `/pages/gongyingshang/shangpinxiangqing?id=${this.id}`,
			//   });
			// } else {
			//   uni.navigateTo({
			//     url: "/pages/gongyingshang/index",
			//   });
			// }
		},

		getDetail() {
			proDetails({
				id: this.id
			}).then((res) => {
				this.data = res.data;

				if (res.data.typeId) {
					this.actionSheetList.forEach((item) => {
						if (item.id == res.data.typeId) {
							this.currentSelect = item;
						}
					});
				}

				if (res.data.sysTypeId) {
					this.actionSheetLists.forEach((item) => {
						if (item.id == res.data.sysTypeId) {
							this.currentSelects = item;
						}
					});
				}

				this.$set(this.form, "name", res.data.name);
				this.$set(this.form, "kucun", String(res.data.stockNum));
				this.$set(this.form, "price", String(res.data.price));
				this.$set(this.form, "params", res.data.parameter);
				this.$set(this.form, "fenlei", this.currentSelect.name);
				this.$set(this.form, "sysType", this.currentSelects.name);

				if (res.data.smallImage != null && res.data.smallImage != "") {
					this.images = res.data.smallImage.split(",");
				}

				if (res.data.detailImage != null && res.data.detailImage != "") {
					this.detailImages = res.data.detailImage;
				}

				if (res.data.image != null && res.data.image != "") {
					this.image = res.data.image;
				}

				this.skulist = res.data.specifications;
			});
		},

		handleAddSku() {
			this.show = true;
			this.skuForm = {
				name: "",
				price: "",
				commission: "",
			};
			this.skuImages = "";
			this.skuadd = true;
		},

		actionSheetCallback(val) {
			this.currentSelect = this.actionSheetList[val];
			this.$set(this.form, "fenlei", this.actionSheetList[val].name);
		},

		actionSheetCallback1(val) {
			this.currentSelects = this.actionSheetLists[val];
			this.$set(this.form, "sysType", this.actionSheetLists[val].name);
		},

		delimages(index) {
			let arr = this.images;
			arr.splice(index, 1);
			this.images = arr;
		},

		deldetailImages() {
			this.detailImages = "";
		},

		delimage() {
			this.image = "";
		},

		handleBtnClick() {
			let that = this;
			const {
				image,
				images,
				form,
				detailImages,
				skulist,
				currentSelect,
				currentSelects,
				isAdd,
				data,
				id,
			} = this;

			this.$refs.uForm.validate((valid) => {
				if (valid) {
					let str = "";
					if (images.length == 0) {
						return uni.showToast({
							icon: "none",
							title: "请选择产品轮播图",
						});
					} else {
						images.forEach((item, index) => {
							if (images.length == index + 1) {
								str = str + item;
							} else {
								str = str + item + ",";
							}
						});
					}

					if (detailImages == "") {
						return uni.showToast({
							icon: "none",
							title: "请选择产品详情图",
						});
					}

					if (image == "") {
						return uni.showToast({
							icon: "none",
							title: "请选择产品主图",
						});
					}

					if (skulist.length == 0) {
						return uni.showToast({
							icon: "none",
							title: "请添加商品规格",
						});
					}
					if (isAdd) {
						addPro({
							detailImage: detailImages,
							smallImage: str,
							image,
							name: form.name,
							parameter: form.params,
							price: form.price,
							stockNum: form.kucun,
							specifications: skulist,
							supplierId: storage.getUserInfo().storeId,
							typeId: currentSelect.id,
							sysTypeId: currentSelects.id,
							isCost: form.isCost,
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: that.isAdd ? "新增成功" : "修改成功",
							});

							if (that.isAdd) {
								(that.form = {}),
									(that.skulist = []),
									(that.images = []),
									(that.detailImages = ""),
									(that.image = "");
							}
						});
					} else {
						updPro({
							...data,
							detailImage: detailImages,
							smallImage: str,
							image,
							name: form.name,
							parameter: form.params,
							price: form.price,
							stockNum: form.kucun,
							specifications: skulist,
							typeId: currentSelect.id,
							sysTypeId: currentSelects.id,
							id: id,
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: that.isAdd ? "新增成功" : "修改成功",
							});
						});
					}
				}
			});
		},

		choosepic() {
			const num = 9 - this.images.length;
			const that = this;
			uni.chooseImage({
				count: num,
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album", "camera"], //从相册选择
				success: function (res) {
					const filePath = res.tempFilePaths;
					// that.images = filePath

					filePath.forEach((i) => {
						uni.uploadFile({
							url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
							filePath: i,
							name: "file", // 必须填写，后台用来接收文件

							success: function (uploadFileRes) {
								that.images.push(JSON.parse(uploadFileRes.data).data);
							},
							fail: function (uploadFileErr) { },
						});
					});
				},
			});
		},

		delskuImages() {
			this.skuImages = "";
		},

		handleAddSkuTolist() {
			const {
				name,
				price,
				commission
			} = this.skuForm;
			if (name == "" || price == "" || commission == "") {
				return uni.showToast({
					icon: "none",
					title: "请填写信息",
				});
			}

			if (this.skuImages == "") {
				return uni.showToast({
					icon: "none",
					title: "请选择规格图片",
				});
			}

			if (this.skuadd) {
				this.skulist.push({
					name,
					price,
					image: this.skuImages,
					commission,
				});
			} else {
				this.skulist.splice(this.currenSkuIndex, 1, {
					name,
					price,
					image: this.skuImages,
					commission,
				});
			}

			this.skuForm = {
				name: "",
				price: "",
				commission: "",
			};

			this.skuImages = "";
			this.show = false;
		},

		handleDeleteList() {
			const {
				currenSkuIndex,
				skulist
			} = this;

			skulist.splice(currenSkuIndex, 1);
			this.show = false;
		},

		handleTagClick(item, index) {
			this.skuForm.name = item.name;
			this.skuForm.price = item.price;
			this.skuForm.commission = item.commission;
			this.skuImages = item.image;
			this.show = true;
			this.skuadd = false;
			this.currenSkuIndex = index;
		},

		chooseimage() {
			const that = this;

			uni.chooseImage({
				count: 1,
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album", "camera"], //从相册选择
				success: function (res) {
					const filePath = res.tempFilePaths[0];
					uni.uploadFile({
						url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
						filePath: filePath,
						name: "file", // 必须填写，后台用来接收文件

						success: function (uploadFileRes) {
							that.image = JSON.parse(uploadFileRes.data).data;
						},
						fail: function (uploadFileErr) { },
					});
				},
			});
		},

		choosedetaipic() {
			const that = this;

			uni.chooseImage({
				count: 1,
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album", "camera"], //从相册选择
				success: function (res) {
					const filePath = res.tempFilePaths[0];
					uni.uploadFile({
						url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
						filePath: filePath,
						name: "file", // 必须填写，后台用来接收文件

						success: function (uploadFileRes) {
							that.detailImages = JSON.parse(uploadFileRes.data).data;
						},
						fail: function (uploadFileErr) { },
					});
				},
			});
		},

		chooseskupic() {
			const that = this;

			uni.chooseImage({
				count: 1,
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album", "camera"], //从相册选择
				success: function (res) {
					const filePath = res.tempFilePaths[0];
					uni.uploadFile({
						url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
						filePath: filePath,
						name: "file", // 必须填写，后台用来接收文件

						success: function (uploadFileRes) {
							that.skuImages = JSON.parse(uploadFileRes.data).data;
						},
						fail: function (uploadFileErr) { },
					});
				},
			});
		},
	},
};
</script>

<style scoped>
.shangpinshangjia {
	width: 100%;
	min-height: 100vh;
	background: #f9f9f9;
}

.top {
	width: 100%;
	height: 188rpx;
	position: relative;
	background: #ffffff;
}

.topback {
	width: 16rpx;
	height: 29rpx;
	position: absolute;
	top: 106rpx;
	left: 32rpx;
}

.topname {
	width: 300rpx;
	height: 32rpx;
	text-align: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 33rpx;
	color: #222222;
	line-height: 32rpx;
	position: absolute;
	top: 104rpx;
	left: 50%;
	transform: translateX(-50%);
}

.tiezishangchuancenter {
	width: 100%;
	padding: 24rpx;
}

.tiezishangchuancenterform {
	width: 100%;
	background: #ffffff;
	padding: 0 24rpx;
}

::v-deep .u-input__input {
	text-align: right;
}

::v-deep .u-input--border {
	border: none !important;
}

::v-deep .u-form-item {
	border-bottom: 2rpx solid #f3f3f3;
}

::v-deep .uni-textarea-wrapper {
	text-align: left;
}

.zhengwen {
	height: 100rpx;
	line-height: 100rpx;
}

::v-deep .u-input__textarea {
	border-radius: 10rpx;
}

.uploadingview {
	margin-top: 50rpx;
	width: 100%;
	/* background: red; */
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	border-bottom: 1rpx solid #f9f9f9;
}

.imageimg {
	position: relative;
	width: 218rpx;
	height: 218rpx;
	padding: 15rpx;
	margin-bottom: 15rpx;
	/* margin-right: 10rpx; */

	image {
		width: 218rpx;
		height: 218rpx;
	}
}

.imageimgimg {
	position: relative;
	width: 218rpx;

	padding: 15rpx;
	margin-bottom: 15rpx;
	/* margin-right: 10rpx; */

	img {
		width: 218rpx;
	}
}

.deldiv {
	width: 31rpx;
	height: 31rpx;
	background: url("../../static/businessImg/del.png") no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -10rpx;
	right: -10rpx;
}

.lijifabu {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	margin-top: 46rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 43rpx;
	color: #ffffff;
	background: rgb(148, 207, 57);
	border-radius: 45rpx;
}

.productcneteritem {
	width: 100%;
	height: 160rpx;
	position: relative;
	margin-bottom: 30rpx;
}

.productcneteritemimg {
	width: 160rpx;
	height: 160rpx;
	position: absolute;
	top: 0;
	left: 0;
}

.productcneteritemname {
	width: 462rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 26rpx;
	color: #151f38;
	position: absolute;
	top: 10rpx;
	left: 180rpx;
}

.productcneteritemprice {
	width: 300rpx;
	position: absolute;
	bottom: 5rpx;
	left: 180rpx;
	font-family: PingFang;
	font-weight: 500;
	font-size: 24rpx;
	color: #ff3a3a;
}

.productcneteritembtn {
	width: 105rpx;
	height: 45rpx;
	text-align: center;
	line-height: 45rpx;
	background: rgb(148, 207, 57);
	border-radius: 25rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 32rpx;
	color: #ffffff;
	position: absolute;
	bottom: 5rpx;
	right: 40rpx;
}

.slot-content2 {
	height: 145rpx;
	line-height: 145rpx;
	text-align: center;
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 38rpx;
	color: #707070;
}

::v-deep .u-model__footer {
	justify-content: space-around;
	/* padding-bottom: 20rpx; */
	height: 100rpx;
	align-items: center;
}

.detailImages {
	width: 100%;

	position: relative;
}

.deldiv1 {
	width: 31rpx;
	height: 31rpx;
	background: url("../../static/businessImg/del.png") no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -10rpx;
	right: -10rpx;
}

.shangjiabtn {
	width: 100%;
	height: 91rpx;
	background: rgb(40, 199, 73);
	text-align: center;
	line-height: 91rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 36rpx;
	color: #ffffff;
	border-radius: 50rpx;
	margin-top: 40rpx;
}

.skupopup {
	width: 100%;
	padding: 30rpx;
}

.skupopupbtn {
	width: 100%;
	height: 58rpx;
	margin-top: 30rpx;

	display: flex;
	align-items: center;
	justify-content: space-around;

	.skupopupadd {
		text-align: center;
		width: 30%;
		height: 100%;
		line-height: 58rpx;
		border-radius: 29rpx;
		background: rgb(132, 194, 87);
		color: #ffffff;
	}
}
</style>
